<script setup lang="ts">
import {onBeforeUnmount, onMounted, ref} from 'vue';
import * as echarts from 'echarts';

// 假设你有一个方法来获取数据
const fetchData = async () => {
  // 这里模拟从后端获取数据
  return [
    {name: '河口镇', value: 100},
    {name: '永平镇', value: 95},
    {name: '石塘镇', value: 80},
    {name: '鹅湖镇', value: 75},
    {name: '湖坊镇', value: 65},
    {name: '武夷山镇', value: 60},
    {name: '汪二镇', value: 55},
    {name: '葛仙山镇', value: 50},
    {name: '陈坊乡', value: 45},
    {name: '虹桥乡', value: 40},
    {name: '新滩乡', value: 35},
    {name: '稼轩乡', value: 30},
    {name: '英将乡', value: 25},
    {name: '紫溪乡', value: 20},
    {name: '太源畲族乡', value: 15},
    {name: '天柱山乡', value: 10},
    {name: '篁碧畲族乡', value: 5}
  ];
};

// 获取数组中指定键的值
const getArrByKey = (data: any[], key: string = 'value') => {
  // 遍历数据数组，提取每个对象中指定键的值
  return data.map(item => item[key]);
};

// 获取符号数据
const getSymbolData = (data: any[]) => {
  // 遍历数据数组，为每个对象添加 symbolPosition 属性
  return data.map(item => ({
    value: item.value,
    symbolPosition: 'end'
  }));
};

// 定义一个引用，用于引用图表容器的 DOM 元素
const chartRef = ref<HTMLElement | null>(null);

let chart: echarts.ECharts | null = null;  // ECharts 实例


// 定义一个异步函数来渲染柱状图
const renderBarChart = async () => {
  // 检查 chartRef 是否已经挂载到 DOM 上
  if (chartRef.value) {
    // 初始化 ECharts 实例
    chart = echarts.init(chartRef.value);

    // 获取数据
    let data = await fetchData();
    // 按照 value 值从大到小排序数据
    data = data.sort((a, b) => b.value - a.value);

    const maxValue = Math.max(...data.map(item => item.value));

    // 定义图表的配置项
    const option = {
      // 配置提示框组件
      tooltip: {
        trigger: 'item', // 触发类型为数据项
      },
      // backgroundColor: '#000000', // 设置图表背景颜色为黑色
      grid: {
        top: '3%', // 设置网格距离顶部的距离
        bottom: '0%', // 设置网格距离底部的距离
        right: '15px', // 设置网格距离右侧的距离
        left: '80px', // 设置网格距离左侧的距离
        containLabel: true // 包含刻度标签
      },
      xAxis: {
        max: maxValue * 1.1,   // 最大值
        show: false // 不显示 X 轴
      },
      // yAxis: {
      //   show: false // 不显示 X 轴
      // },
      yAxis: [{
        // triggerEvent: true, // 触发事件
        show: true, // 显示 Y 轴

        inverse: true, // 反转 Y 轴方向
        data: getArrByKey(data, 'name'), // 使用数据中的 name 字段作为 Y 轴数据
        axisLine: {
          show: false // 不显示坐标轴线
        },
        splitLine: {
          show: false // 不显示分割线
        },
        axisTick: {
          show: false // 不显示刻度线
        },
        axisLabel: {
          show: false, // 不显示刻度标签
          interval: 0, // 显示所有刻度标签
          color: '#fff', // 设置刻度标签颜色为白色
          align: 'left', // 设置刻度标签对齐方式为左对齐
          margin: 80, // 设置刻度标签与轴线的距离
          fontSize: 13, // 设置刻度标签字体大小
          formatter: function (value: string, index: number) {
            // 格式化刻度标签内容
            return '{title|' + value + '}';
          },
          rich: {
            title: {
              width: 165 // 设置刻度标签的宽度
            }
          }
        },
      },

      ],
      series: [
        {
          name: '乡镇GEP排名', // 系列名称
          type: 'pictorialBar', // 系列类型为图片柱状图
          symbol: 'image://', // 图片符号
          symbolSize: [30, 30], // 图片符号大小
          symbolOffset: [18, 0], // 图片符号偏移  18 柱子头光点的位置
          z: 12, // 图片符号的层级
          itemStyle: {
            color: 'rgb(39,151,145)', // 图片符号颜色
          },
          data: getSymbolData(data) // 图片符号数据
        },
        {
          name: 'GEP（万元）', // 系列名称 提示框显示的标题
          type: 'bar', // 系列类型为柱状图
          showBackground: true, // 显示背景

          yAxisIndex: 0, // 使用第一个 Y 轴
          data: data, // 数据
          barWidth: 5, // 柱状图宽度
          itemStyle: {
            color: function (params: any) {
              // 使用两种渐变颜色交替
              const gradients = [
                new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [
                      {offset: 0, color: 'rgba(122, 177, 218, 0.1)'},
                      {offset: 1, color: 'rgb(39,151,145)'}

                    ],
                    false
                ),
                new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [
                      {offset: 0, color: 'rgba(48,134,198,0.1)'},
                      {offset: 1, color: 'rgba(48,134,198,1)'}
                    ],
                    false
                )
              ];
              return gradients[params.dataIndex % 2];
            },

          },
          label: {
            color: '#fff', // 标签颜色
            show: true, // 显示标签
            position: ['-75px', 0], // 标签位置 '-75px 柱子距离y轴标签的距离
            fontSize: 14, // y轴标签字体大小
            formatter: function (a: any, b: any) {
              // 格式化标签内容为数据名称
              return a.name;
            }

          }
        }]
    };

    // 设置图表的配置项
    chart.setOption(option);
  }
}

// 在组件挂载后执行
onMounted(() => {
  // 延迟初始化图表，以确保 DOM 元素已经渲染完成
  setTimeout(() => {
    renderBarChart();
  }, 200);
});

onBeforeUnmount(
    () => {
      // 在组件销毁前执行
      // 清理图表实例
      if (chart) {
        console.log('销毁图表实例-bar01');
        chart.dispose();
        chart = null;
      }
    }
)
</script>

<template>
  <!-- 定义图表容器，使用 ref 绑定到 chartRef 引用 -->
  <div ref="chartRef" style="width: 100%; height: 100%;"></div>
</template>

<style scoped>
/* 你可以根据需要添加样式 */
</style>
